<script setup>
import { ref, computed, onMounted } from "vue";
import { useColorMode } from "@vueuse/core";
const { system, store } = useColorMode();
// 计算属性，动态获取设置的 主题色模式
const myColorMode = computed(() =>
    store.value === "auto" ? system.value : store.value
);
let themeSelected = ref(
    store.value == "light" ? 1 : store.value == "dark" ? 2 : 3
);

const changeTheme = (val, e, id) => {
  themeSelected.value = id;
  if (store.value == val) return;

  if (val === "auto") {
    document.startViewTransition(() => {
      store.value = val;
      document.documentElement.classList.remove("light", "dark");
      document.documentElement.classList.add(system.value); // 使用系统当前主题
    });
    return;
  }

  let transition = document.startViewTransition(() => {
    store.value = val;
    document.documentElement.classList.remove("light", "dark");
    document.documentElement.classList.add(val);
  });

  transition.ready.then(() => {
    // 获取选中元素的位置信息
    const x = e.clientX;
    const y = e.clientY;

    // 获取画圆的半径
    const radius = Math.sqrt(
        Math.max(x, window.innerWidth - x) ** 2 +
        Math.max(y, window.innerHeight - y) ** 2
    ); // 勾股定理

    document.documentElement.animate(
        {
          clipPath: [
            `circle(0 at ${x}px ${y}px)`,
            `circle(${radius}px at ${x}px ${y}px)`,
          ],
        }, // 在坐标x,y处从半径为0的圆变为半径为radius的圆
        {
          duration: 500,
          pseudoElement: "::view-transition-new(root)",
        }
    );
  });
};
let themeList = ref([
  {
    id: 1,
    name: "亮色主题",
    click: (e) => changeTheme("light", e, 1),
  },
  {
    id: 2,
    name: "暗色主题",
    click: (e) => changeTheme("dark", e, 2),
  },
  {
    id: 3,
    name: "将主题与电脑同步",
    click: (e) => changeTheme("auto", e, 3),
  },
]);
</script>

<template>
  <div class="interface-wp">
    <div class="theme-box">
      <div class="theme-title">界面主题</div>
      <div
          class="theme-item"
          v-for="item in themeList"
          :key="item.id"
          v-wave="{
          color: 'var(--animation-color)',
          duration: 0.3,
        }"
          @click="item.click"
      >
        <div
            class="theme-item-box"
            :class="{ active: themeSelected == item.id }"
        >
          <article></article>
        </div>
        <div class="theme-item-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.interface-wp {
  padding-top: 80px;
  box-sizing: border-box;
  .theme-box {
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    .theme-title {
      font-weight: 600;
    }
    .theme-item {
      margin-top: 10px;
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;
      background: var(--setting-menu-item-bg);
      color: var(--setting-menu-item-active-color);
      border-radius: 10px;
      padding: 0 10px;
      box-sizing: border-box;
      cursor: pointer;
      &:hover {
        background: var(--setting-menu-item-hover-bg);
        & .theme-item-box article {
          background: #bcc2cc;
        }
      }
      .theme-item-box {
        width: 20px;
        height: 20px;
        border-radius: 5px;
        border: 1px solid #586274;

        background: #fff;
        padding: 2px;
        box-sizing: border-box;
        &.active {
          article {
            background: #ffbc00;
          }
        }
        article {
          width: 100%;
          height: 100%;
          background: #fff;
          border-radius: 2px;
        }
      }
      .theme-item-name {
        margin-left: 10px;
        font-size: 14px;
      }
    }
  }
}
</style>
<style>
:root {
  --theme-color: #000;
  --bg-color: #fff;
  background-color: var(--bg-color);
  color: var(--theme-color);
}

:root.dark {
  --bg-color: #303030;
  --theme-color: #fff;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
</style>
